import React from 'react';
import '../Login.css'
// import 'antd/dist/antd.min.css';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, message } from 'antd';
import { useLgContext } from '../components/userContext';
import { loginApi } from '../api/login';

// const baseUrl1 = 'http://localhost:2023/auth/adminlogin'
const Login = (props) => {
    const {dispatch} = useLgContext()
    const onFinish = (values)=>{
        //接口调用
        // axios.post(`${baseUrl1}`,{username:values.username,pwd:values.password})
        loginApi({
            username:values.username,
            passwd:values.password
        })
        .then(res=>{
            console.log(res)
            //利用token判断登录是否成功（成功的信息有token）
            if(res.data.token){
                //若没登录过则注册设置
                // setToken(res.data.token)
                // setUserName(res.data.username)
                //将需要从全局获取到得username存储回调
                dispatch({
                    type:'dlcg',
                    username:values.username,
                    // username:res.data.username
                })
                message.success('登录成功')
                //登录成功之后跳转路由
                props.history.replace('/')           
            }
            else{
                message.error('账号或密码错误')
                // message.error('res.data.data.error').catch((e)=>{})
            }
        })
    }
    return (
        <div className='bg'>
            <Form
                name="normal_login"
                className="login-form"
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
            >
                <h1 className="tou">国瓷后台管理系统</h1>
                <Form.Item
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your Username!',
                        },
                    ]}
                >
                    <Input 
                        prefix={<UserOutlined className="site-form-item-icon" />}
                        placeholder="Username" 
                    />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your Password!',
                        },
                    ]}
                >
                    <Input
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password" 
                        placeholder="Password"
                    />
                </Form.Item>
                <Form.Item>
                    <Form.Item name="remember" valuePropName="checked" noStyle>
                        <Checkbox>记录密码</Checkbox>
                    </Form.Item>
                    <a className="login-form-forgot" href="">
                        忘记密码
                    </a>
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" block >
                        登录
                    </Button>
                    Or <a href="">注册</a>
                </Form.Item>
            </Form>
        </div>
    )
}

export default Login;